<template>
  <view class="wechat-share-container">
    <!-- 分享按钮 -->
    <view v-if="showShareButton" class="share-button-container">
      <nut-button 
        class="share-btn bg-[#07C160] text-white border-none rounded-[12rpx] py-[12rpx] px-[20rpx] text-[14rpx] font-medium flex items-center"
        @click="handleShare"
      >
        <IconFont name="icon-share" class="text-[16rpx] mr-[6rpx]" />
        分享
      </nut-button>
    </view>
    
    <!-- 分享面板 -->
    <view v-if="showSharePanel" class="share-panel-overlay" @click="closeSharePanel">
      <view class="share-panel" @click.stop>
        <view class="share-panel-header">
          <text class="text-[18rpx] font-medium text-[#333]">分享到</text>
          <IconFont name="close" class="text-[20rpx] text-[#999]" @click="closeSharePanel" />
        </view>
        
        <view class="share-options">
          <view class="share-option" @click="shareToFriend">
            <view class="share-icon bg-[#07C160]">
              <IconFont name="icon-wechat" class="text-[24rpx] text-white" />
            </view>
            <text class="text-[12rpx] text-[#666]">微信好友</text>
          </view>
          
          <view class="share-option" @click="shareToTimeline">
            <view class="share-icon bg-[#07C160]">
              <IconFont name="icon-wechat" class="text-[24rpx] text-white" />
            </view>
            <text class="text-[12rpx] text-[#666]">朋友圈</text>
          </view>
          
          <view class="share-option" @click="copyLink">
            <view class="share-icon bg-[#2196F3]">
              <IconFont name="icon-link" class="text-[24rpx] text-white" />
            </view>
            <text class="text-[12rpx] text-[#666]">复制链接</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Taro } from '@tarojs/taro'
import { Button as nutButton } from '@nutui/nutui-taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { wechatShare, defaultShareConfig } from '@/utils/wechatShare'
import { showSuccessToast, showErrorToast, showNoneToast } from '@/utils/globalToast'

/**
 * 微信分享组件
 * @description 提供微信分享功能，支持分享给好友、朋友圈和复制链接
 */

// Props
interface Props {
  title?: string
  desc?: string
  link?: string
  imgUrl?: string
  showButton?: boolean
  autoInit?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: defaultShareConfig.title,
  desc: defaultShareConfig.desc,
  link: defaultShareConfig.link,
  imgUrl: defaultShareConfig.imgUrl,
  showButton: true,
  autoInit: true
})

// Emits
const emit = defineEmits<{
  shareSuccess: [type: string]
  shareError: [error: string]
}>()

// 状态
const showShareButton = ref(props.showButton)
const showSharePanel = ref(false)
const isSDKReady = ref(false)

/**
 * 初始化微信分享
 */
const initWechatShare = async () => {
  try {
    console.log('🔄 初始化微信分享...')
    
    // 初始化微信SDK
    await wechatShare.initWechatSDK()
    
    // 设置分享配置
    const shareConfig = {
      title: props.title,
      desc: props.desc,
      link: props.link,
      imgUrl: props.imgUrl
    }
    
    wechatShare.setShareConfig(shareConfig)
    
    isSDKReady.value = wechatShare.isSDKReady()
    console.log('✅ 微信分享初始化完成')
    
  } catch (error) {
    console.error('❌ 微信分享初始化失败:', error)
    emit('shareError', '微信分享初始化失败')
  }
}

/**
 * 处理分享按钮点击
 */
const handleShare = () => {
  if (isSDKReady.value) {
    showSharePanel.value = true
  } else {
    Taro.showToast({
      title: '请在微信中打开',
      icon: 'none'
    })
  }
}

/**
 * 关闭分享面板
 */
const closeSharePanel = () => {
  showSharePanel.value = false
}

/**
 * 分享给微信好友
 */
const shareToFriend = () => {
  try {
    if (typeof wx !== 'undefined' && wx.updateAppMessageShareData) {
      wx.updateAppMessageShareData({
        title: props.title,
        desc: props.desc,
        link: props.link,
        imgUrl: props.imgUrl,
        success: () => {
          Taro.showToast({
            title: '分享成功',
            icon: 'success'
          })
          emit('shareSuccess', 'friend')
          closeSharePanel()
        },
        fail: (res: any) => {
          console.error('分享失败:', res)
          Taro.showToast({
            title: '分享失败',
            icon: 'none'
          })
          emit('shareError', '分享给好友失败')
        }
      })
    } else {
      Taro.showToast({
        title: '请在微信中打开',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('分享给好友失败:', error)
    emit('shareError', '分享给好友失败')
  }
}

/**
 * 分享到朋友圈
 */
const shareToTimeline = () => {
  try {
    if (typeof wx !== 'undefined' && wx.updateTimelineShareData) {
      wx.updateTimelineShareData({
        title: props.title,
        link: props.link,
        imgUrl: props.imgUrl,
        success: () => {
          Taro.showToast({
            title: '分享成功',
            icon: 'success'
          })
          emit('shareSuccess', 'timeline')
          closeSharePanel()
        },
        fail: (res: any) => {
          console.error('分享失败:', res)
          Taro.showToast({
            title: '分享失败',
            icon: 'none'
          })
          emit('shareError', '分享到朋友圈失败')
        }
      })
    } else {
      Taro.showToast({
        title: '请在微信中打开',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('分享到朋友圈失败:', error)
    emit('shareError', '分享到朋友圈失败')
  }
}

/**
 * 复制链接
 */
const copyLink = () => {
  try {
    Taro.setClipboardData({
      data: props.link,
      success: () => {
        Taro.showToast({
          title: '链接已复制',
          icon: 'success'
        })
        emit('shareSuccess', 'copy')
        closeSharePanel()
      },
      fail: () => {
        Taro.showToast({
          title: '复制失败',
          icon: 'none'
        })
        emit('shareError', '复制链接失败')
      }
    })
  } catch (error) {
    console.error('复制链接失败:', error)
    emit('shareError', '复制链接失败')
  }
}

// 生命周期
onMounted(() => {
  if (props.autoInit) {
    initWechatShare()
  }
})

onUnmounted(() => {
  closeSharePanel()
})

// 暴露方法给父组件
defineExpose({
  initWechatShare,
  handleShare,
  closeSharePanel
})
</script>

<style scoped>
.wechat-share-container {
  position: relative;
}

.share-button-container {
  display: inline-block;
}

.share-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
}

.share-panel {
  width: 100%;
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  animation: slideUp 0.3s ease-out;
}

.share-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.share-options {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.share-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style> 